<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>页面布局 - 插槽</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
	<style>
.header, .footer{
	min-height: 60px;
	background-color: lightblue;
}
.main{
	margin: 5px auto;
	min-height: 600px;
	overflow: hidden;
}
.main .side{
	width: 30%;
	min-height: inherit;
	background-color: antiquewhite;
	float: left;
}
.main .content{
	width: 70%;
	min-height: inherit;
	background-color: lightgreen;
	float: left;
}

	</style>
</head>
<body>
<div id="app">
	<layout-hmf>
		<template v-slot:header>
			<div class="header">{{header}}</div>
		</template>
		
		<template v-slot:main>
			<div class="main">
				<div class="side">{{main[0]}}</div>
				<div class="content">{{main[1]}}</div>
			</div>
		</template>
		
		<template v-slot:footer>
			<div class="footer">{{footer}}</div>
		</template>
	</layout-hmf>
</div>

<template id="layout-tpl">
	<div class="container">
		<slot name="header"></slot>
		<slot name="main"></slot>
		<slot name="footer"></slot>
		<hr>
		<slot name="footer"></slot>
	</div>
</template>

</body>
<script>
const app = Vue.createApp({
	//实例数据（父组件）
	data(){
		return {
			header:'头部',
			main:['侧边栏', '内容区'],
			footer:'底部'
		}
	},
});

app.component('layout-hmf', {
	template:`#layout-tpl`,
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>